// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';

.c-hero {
    background: $color-purple-90;
    color: $body-text-color-inverse;
    text-align: center;
    min-height: 500px;
    margin-bottom: $spacing-xl;

    @supports (--css: variables) {
        color: var(--body-text-color-inverse);
    }

    .hero-content {
        padding-top: $layout-xl;
        padding-bottom: 0;

        .mzp-c-logo {
            margin-left: auto;
            margin-right: auto;
        }

        h1 {
            @include text-title-lg;
            color: $title-text-color-inverse;
            margin: 0 auto $spacing-2xl;

            @supports (--css: variables) {
                color: var(--title-text-color-inverse);
            }

            @media #{$mq-lg} {
                width: 400px;
            }
        }

        p {
            color: $color-orange-50;
            font-weight: bold;
        }

        img {
            margin-bottom: $spacing-md;
        }
    }

    .download-firefox {
        padding-bottom: $spacing-lg;
    }
}

.mzp-c-article {
    margin: 0 auto $layout-lg;

    .article-section {
        margin-bottom: $layout-lg;

        h2 {
            @include text-title-md;
        }
    }

    hr {
        border: 2px solid $color-purple-90;
        margin: $layout-lg auto $layout-lg;
        width: 100px;
    }
}

// * -------------------------------------------------------------------------- */
// Call out

.mzp-l-compact.mzp-t-dark {
    background: $color-purple-90;

    @media #{$mq-md} {
        .mzp-c-callout-cta-container {
            white-space: nowrap;

        }
    }
}
